<template>
    <!-- 轮播图组件 -->
    <SwiperView :api="getSwiper" :autoplay="true" :interval="3000">
        <template #header>
            <NavTop />
        </template>

        <template #footer>
            <ScrollBar />
        </template>

    </SwiperView>

    <!-- 今日推荐 -->
    <div class="tui">
        <div class="dv_1">
            <h2>{{ data.data.data[0].title }}</h2>
            <span>{{ data.data.data[0].titleChild }}</span>
        </div>

        <ul class="ul_1">
            <li v-for="(item, index) in data.data.data[0].tablist" :key="index" @click="tabClick(index)"
                :class="init === index ? 'a1' : ''">
                {{ item }}
            </li>
        </ul>
    </div>

    <!-- 空白创建 -->
    <div class="kong">
        <div class="kong_left">
            <div class="left_top">空白创建</div>
            <img src="../../public/yingxiao.png" alt="" class="left_bottom">
        </div>

        <div class="kong_right">
            <!-- 精选推荐 -->
            <el-scrollbar v-if="init == 0">
                <div class="scrollbar-flex-content_2">
                    <div v-for="item in data.data.data[0].cardlist" :key="item" class="scrollbar-demo-item">
                        <img :src="item.cardHeadImg" alt="">
                    </div>
                </div>
            </el-scrollbar>

            <!-- 企业招聘 -->
            <el-scrollbar v-if="init == 1">
                <div class="scrollbar-flex-content_2">
                    <div v-for="item in companyList" :key="item" class="scrollbar-demo-item">
                        <img v-error="item">
                    </div>
                </div>
            </el-scrollbar>

            <!-- 培训招生 -->
            <el-scrollbar v-if="init == 2">
                <div class="scrollbar-flex-content_2">
                    <div v-for="item in trainList" :key="item" class="scrollbar-demo-item">
                        <img v-error="item" alt="">
                    </div>
                </div>
            </el-scrollbar>

            <span class="sp_left" @click="leftClick">《</span>
            <span class="sp_right" @click="rightClick">》</span>
        </div>
    </div>

    <div class="box_3">
        <img src="../../public/5zhe.png" alt="">
    </div>

    <!-- 邀请函 -->
    <div class="box_4">
        <h1>邀请函·高端会议必备</h1>
        <ul>
            <li v-for="(item, index) in inviteList" :key="index">{{ item.title }}</li>
        </ul>
        <span>查看更多》</span>
    </div>
    <!-- 缔造城市封面 -->
    <div class="box_5">
        <el-scrollbar>
            <ul>
                <li v-for="(item, index) in listImg" :key="index">
                    <img v-error="item">
                </li>
            </ul>
        </el-scrollbar>
    </div>

    <!-- 瑞龙迎春 -->
    <div class="box_6">
        <h1>瑞龙迎春·恭贺新禧</h1>
        <ul>
            <li v-for="(item, index) in lonngList" :key="index">{{ item.title }}</li>
        </ul>
        <span>查看更多》</span>
    </div>

    <div class="box_7">
        <el-scrollbar>
            <ul>
                <li v-for="(item, index) in lonngList" :key="index">
                    <img :src="item.img" alt="">
                </li>
            </ul>
        </el-scrollbar>
    </div>
</template>

<script setup>
import SwiperView from '@/components/SwiperView.vue'
import NavTop from '../components/NavTop.vue'
import ScrollBar from '../components/ScrollBar.vue';
import { getSwiper } from '../api/home'
import { getData } from '../api/home';
import { nextTick, ref } from 'vue'

const data = ref()
data.value = await getData()
const init = ref(0)
// console.log(data.value)

const div_1 = document.getElementsByClassName('scrollbar-flex-content_2')


// 点击左箭头
const leftClick = () => {
    if (div_1[0].offsetLeft >= -800) {
        div_1[0].style.marginLeft = div_1[0].offsetLeft - 200 + 'px'
    }
}

// 点击右箭头
const rightClick = () => {
    if (div_1[0].offsetLeft !== 0) {
        div_1[0].style.marginLeft = div_1[0].offsetLeft + 200 + 'px'
    }
}

// 点击tab切换
const tabClick = (index) => {
    init.value = index
}
// 企业招聘数据
const companyList = ref()
companyList.value = data.value.data.data[0].cardlist[1].cardImgList
// console.log(companyList.value )

// 培训招生数据
const trainList = ref()
trainList.value = data.value.data.data[0].cardlist[5].cardImgList
// console.log(trainList.value )

// 年会邀请数据
const inviteList = ref([])
inviteList.value = [
    { title: '年会邀请' },
    { title: '展会邀请' },
    { title: '商务会议' },
    { title: '开业邀请' },
    { title: '婚礼邀请' },
    { title: '招商引资' },
    { title: '邀请长图' },
    { title: '朋友圈海报' }
]

const listImg = ref([])
listImg.value = data.value.data.data[0].cardlist[3].cardImgList
// console.log(listImg.value)

// 瑞龙迎春数据
const lonngList = ref([])
lonngList.value = [
    {
        title: '新春祝福',
        img: "https://dingyue.ws.126.net/2019/04/14/22b1dc57a9b04218b7cbea44485da132.gif"
    },
    {
        title: '放假通知',
        img: "https://img.17getfun.com/aUZ5bq8BX7naWT0.gif"
    },
    {
        title: '年货促销',
        img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F8961125%2Ff178911468ee8dcba981d9a8635190cb.gif%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvODk2MTEyNS9mMTc4OTExNDY4ZWU4ZGNiYTk4MWQ5YTg2MzUxOTBjYi5naWY%3D%2Fsign%2F77154615620b5b8b4eb77965abe8dd68.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708659991&t=16cbeb0198f105a20d35016bbb3d4611"
    },
    {
        title: '廉洁过年',
        img: "https://img.zcool.cn/community/018a745e6a0704a80121651817b534.gif"
    },
    {
        title: '年夜饭投票',
        img: "../../public/long_img/pbl3.webp"
    },
    {
        title: '新春长图',
        img: "../../public/long_img/pbl4.webp"
    },
    {
        title: '游戏抽奖',
        img: "../../public/long_img/pbl5.webp"
    },
    {
        title: '拜年视频',
        img: "../../public/long_img/to.jpg"
    },
]

</script>

<style scoped lang="less">
.tui {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    // background-color: cyan;
}

.dv_1 {
    float: left;
    display: flex;
    width: 250px;
    justify-content: space-between;
}

.ul_1 {
    margin-left: 50px;
    float: left;
    width: 300px;
    display: flex;
    justify-content: space-evenly;

    li {
        min-width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 30px;
        border: 1px solid #000;
    }

    .a1 {
        background-color: skyblue;
        color: #fff;
        font-weight: 800;
        border: none;
    }

    li:hover {
        cursor: pointer;
    }

}

.kong {
    margin-top: 10px;
    height: 280px;
    display: flex;
    justify-content: space-between;

    /* background-color: aqua; */
    .kong_left {
        width: 20%;
        height: 100%;

        /* background-color: cyan; */
        .left_top {
            height: 45%;
            border-radius: 5px;
            background-color: #f4f2f2;
            text-align: center;
            box-shadow: 0 0 5px 2px #ccc;
        }

        /* 滑过放大 */
        .left_top:hover {
            transform: scale(1.1);
            cursor: pointer;
            background-color: #fff;
            box-shadow: 0 0 8px 2px #ccc;
        }

        .left_bottom {
            margin-top: 22px;
            border-radius: 15px;
            width: 100%;
            height: 45%;
            background-color: aquamarine;
        }

        .left_bottom:hover {
            transform: scale(1.1);
            cursor: pointer;
        }
    }

    .kong_right {
        width: 75%;
        height: 100%;
        // background-color: pink;
        display: flex;
        position: relative;

        /* 左右箭头 */
        .sp_left {
            font-size: 25px;
            position: absolute;
            left: 0;
            top: 50%;
            color: #fff;
            width: 50px;
            height: 50px;
            background-color: #000;
            border-radius: 50%;
            text-align: center;
            display: none;
        }

        .sp_right {
            font-size: 25px;
            position: absolute;
            right: 0;
            top: 50%;
            color: #fff;
            width: 50px;
            height: 50px;
            background-color: #000;
            border-radius: 50%;
            text-align: center;
            display: none;
        }

        /* 轮播图 */
        .scrollbar-flex-content_2 {
            display: flex;
            height: 260px;
        }

        .scrollbar-demo-item {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 180px;
            height: 100%;
            margin: 10px;
            text-align: center;
            border-radius: 4px;
            background: var(--el-color-danger-light-9);
            color: var(--el-color-danger);

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }
        }
    }

    /* 划过显示左右箭头 */
    .kong_right:hover span {
        display: block;
        cursor: pointer;
        user-select: none;
        z-index: 666;
    }
}


.box_3 {
    height: 100px;
    margin: 15px auto;
    width: 100%;

    img {
        width: 100%;
        height: 100%;
        border-radius: 15px;
    }
}

// 邀请函
.box_4 {
    margin: 15px auto;
    height: 50px;
    // background-color: cyan;
    display: flex;
    justify-content: space-between;
    align-items: center;

    ul {
        li {
            float: left;
            margin: auto 25px;
            min-width: 80px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-radius: 40px;
            background-color: #fefefe;
        }

        &>li:hover {
            cursor: pointer;
            color: #00f;
            font-weight: 800;
        }
    }

    span:hover {
        cursor: pointer;
        color: #00f;
        font-weight: 800;
    }
}

.box_5 {
    height: 300px;
    background-color: #fefefe;

    ul {
        display: flex;
        height: 300px;

        img {
            width: 200px;
            height: 100%;
            margin: auto 10px;
        }
    }
}

// 瑞龙迎春 
.box_6 {
    margin: 15px auto;
    height: 50px;
    // background-color: cyan;
    display: flex;
    justify-content: space-between;
    align-items: center;

    ul {
        li {
            float: left;
            margin: auto 25px;
            min-width: 80px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-radius: 40px;
            background-color: #fefefe;
        }

        &>li:hover {
            cursor: pointer;
            color: #00f;
            font-weight: 800;
        }
    }

    span:hover {
        cursor: pointer;
        color: #00f;
        font-weight: 800;
    }
}

.box_7 {
    height: 300px;
    margin-bottom: 50px;
    background-color: #fefefe;

    ul {
        display: flex;
        height: 300px;

        img {
            width: 200px;
            height: 100%;
            margin: auto 10px;
        }
    }
}
</style>